import { Device } from "@/api/interface/iot";
import { getSystemLoggerList } from "@/api/modules/system/logger";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { shortcuts } from "@/hooks/useTime";
import BasicDialog from "./components/basicDialog";
import { ComponentInternalInstance, getCurrentInstance } from "vue";
import "./index.scss";
export default defineComponent({
	setup() {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const initParam = reactive<Device.ReqProduct>({ pageIndex: 1, pageSize: 20 });
		const proTable = ref<any>();

		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current,
				pageSize: data.size
			};
		};

		const getTableList = async (params: any) => {
			if (state.timeRange?.length) {
				params.startTime = state.timeRange[0];
				params.endTime = state.timeRange[1];
			}
			return getSystemLoggerList(params);
		};
		const state = reactive({
			timeRange: []
		});
		const btnList = ref<any>([]);
		onMounted(async () => {
			// 获取页面按钮权限
			btnList.value = await useAuthButtons();
		});
		const detailDialog = reactive<any>({
			title: proxy?.$t("logger.dialog_title.detail"),
			detail: {},
			visible: false
		});
		const clickBtn = async (fn: string, row: any) => {
			switch (fn) {
				case "detail":
					detailDialog.detail = row;
					detailDialog.visible = true;
					break;
			}
		};

		// 表格配置项
		const columns: ColumnProps[] = [
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "username", label: proxy?.$t("logger.tablist_label.username"), width: 100, search: { el: "input" } },
			{ prop: "uri", label: proxy?.$t("logger.tablist_label.uri"), width: 200, search: { el: "input" } },
			{ prop: "method", label: proxy?.$t("logger.tablist_label.method"), width: 80 },
			{ prop: "code", label: proxy?.$t("logger.tablist_label.code"), width: 80 },
			{ prop: "latency", label: proxy?.$t("logger.tablist_label.latency"), width: 150 },
			{ prop: "operateTime", label: proxy?.$t("logger.tablist_label.operate_time"), width: 180, search: { slot: {} } },
			{ prop: "ip", label: proxy?.$t("logger.tablist_label.ip"), width: 120 },
			{ prop: "region", label: proxy?.$t("logger.tablist_label.region") },
			{ prop: "operation", label: proxy?.$t("logger.tablist_label.operation") }
		];

		return () => {
			return (
				<div class="logger-page">
					<BasicDialog
						width="800px"
						title={detailDialog.title}
						v-model:visible={detailDialog.visible}
						detail={detailDialog.detail}
					></BasicDialog>
					<ProTable
						ref={proTable}
						title={btnList.value.length ? "" : proxy?.$t("logger.tab_title.logmanage")}
						columns={columns}
						requestApi={getTableList}
						initParam={initParam}
						showHeader={false}
						searchCol={4}
						dataCallback={dataCallback}
					>
						{{
							tableHeader: (scope: any) => {
								return btnList.value?.map((item: any) => {
									return (
										<el-button onClick={() => clickBtn(item.path, scope)} type={item.btnClass}>
											<i class={`iconfont ${item.icon}`}></i>
											{item.menuName}
										</el-button>
									);
								});
							},
							"search-operateTime": () => {
								return (
									<el-date-picker
										v-model={state.timeRange}
										style="width:340px"
										type="datetimerange"
										shortcuts={shortcuts()}
										range-separator={proxy?.$t("logger.select_time.to")}
										start-placeholder={proxy?.$t("logger.select_time.start")}
										end-placeholder={proxy?.$t("logger.select_time.end")}
									/>
								);
							},
							uri: (scope: any) => {
								return (
									<el-link type="primary" onClick={() => clickBtn("detail", scope.row)}>
										{scope.row.uri?.split("?")[0]}
									</el-link>
								);
							},
							code: (scope: any) => {
								return <el-tag type={scope.row.code == 200 ? "success" : "danger"}>{scope.row.code}</el-tag>;
							},
							method: (scope: any) => {
								let res: any;
								switch (scope.row.method) {
									case "GET":
										res = <el-tag type="">{scope.row.method}</el-tag>;
										break;
									default:
										res = <el-tag type="info">{scope.row.method}</el-tag>;
								}
								return res;
							},
							operation: (scope: any) => {
								return (
									<>
										<el-link
											type="primary"
											link
											class="iconfont iconbx-file"
											onClick={() => {
												clickBtn("detail", scope.row);
											}}
										>
											{proxy?.$t("logger.link.detail")}
										</el-link>
									</>
								);
							}
						}}
					</ProTable>
				</div>
			);
		};
	}
});
